{include file="public/head" title="发布订单" keywords="发布订单" description="发布订单" /}

<style>
    .uploadImg{cursor:pointer; overflow:hidden; position:relative;width: 5rem;height: 5rem;}
    .file{ cursor:pointer;position:absolute; z-index:100; left:0;top:0;width: 5rem;height: 5rem;opacity:0;filter:alpha(opacity=0);}
    .uploadImg a{cursor:pointer;background:#0e2d43;position: absolute;top:0.5rem;left:0;display: block;width: 5rem;height: 5rem;text-align: center;line-height: 32px;color:white;font-size:14px;font-weight:normal;}
    .mui-table-view-cell:after{
        background-color:#fff;
    }

</style>

<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
    <!-- 菜单容器 -->

    <div class="mui-inner-wrap">
        <div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper" style="background-color: #fff;">
            <div class="mui-scroll">
                <header class="tx_head">
                    <p>
                        <a href="javascript:history.go(-1)" class="header_p1"><span class="mui-icon mui-icon-arrowleft"></span></a>
                    <h5>发布需求</h5>

                    </p>
                </header>
                <main>
                    <article class="bdyhk_a">
                        <section class="bdyhk_a_s">
                           <img src="/static/wap/20181201171614.png" style="display: block;width: 100%;height: 10rem;">
                        </section>
                        <ul class="bdyhk_a_ul">
                            <li>
                                <b> {$userinfo.user_name} 您好</b>
                                <P style="margin: -20px 0 0 0;">
                                    ’悟空到家‘为你服务，全能综合服务，请描述你的需求
                                </P>
                            </li>

                            <li style="border: none;padding-right: 1rem;margin-top: -0.6rem;">
                                <textarea style="display: block;width: 100%;border: none;margin-top: 1rem; background-color: #f9f8f8;height: 6rem;" type="text" id="remark" value="" placeholder="填写您的需求"></textarea>
                            </li>

                            <li style="width: 100%;line-height: 9.9rem;height: 5.9rem;">
                                    <ul >
                                        <li class="f_input" style="border-bottom:none">
                                            <span class="uploadImg">
                                              <input type="file" class="file" id="file_0" onchange="upimg(0)" size="1" >
                                                <a href="#"  accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" >
                                                    <img src="/static/wap/20181201173806.png" id="img_0" style="width: 5rem; height: 5rem;border: 1px solid #f2f2f2;" />
                                                </a>
                                           </span>
                                        </li>
                                        <li class="f_input" style="padding-left: 7rem;border-bottom:none">
                                            <span class="uploadImg">
                                              <input type="file" class="file" id="file_1" onchange="upimg(1)" size="1" >
                                                <a href="#"  accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" >
                                                    <img src="/static/wap/20181201173806.png" id="img_1" style="width: 5rem; height: 5rem;border: 1px solid #f2f2f2;" />
                                                </a>
                                           </span>
                                        </li>
                                        <li class="f_input" style="padding-left: 13rem;border-bottom:none">
                                            <span class="uploadImg">
                                              <input type="file" class="file"id="file_2" onchange="upimg(2)" size="1" >
                                                <a href="#"  accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" >
                                                    <img src="/static/wap/20181201173806.png" id="img_2" style="width: 5rem; height: 5rem;border: 1px solid #f2f2f2;" />
                                                </a>
                                           </span>
                                        </li>
                                    </ul>
                            </li>
                            <li style="clear: both">选择服务
                                <input style="width: 280px;" type="text" id="caidanfenlei" value="" placeholder="选择服务"/>
                                <input style="width: 280px;" type="hidden" id="caidanfenlei_id" value="" />
                            </li>
                            <li style="clear: both">选择日期<input style="width: 280px;" type="text" id="data_option" value="" placeholder="选择日期"/></li>
                            <li class="mui-table-view-cell usrinfo" style="padding: 0;">

                                <a href="{:url('dizhilist')}" class="mui-navigate-right" style="padding-left: 2.2rem;"> {$addr['addr_name']}[{$addr['phone']}] <span style="color: #bec0c6">(默认)</span>
                                    <p style="margin-top: -24px;">{$addr['bname']}{$addr['cname']}{$addr['dname']}{$addr['xiangxi']}</p>
                                </a>
                                <input type="hidden" id="addrid" value="{$addr.addr_id}">
                            </li>
                            <li style="clear: both">待付金额<span style="float: right;margin-right: 1rem">10元</span></li>
                        </ul>
                    </article>
                    <button class="bdyhk_button" id="bank_btn" style="margin-top: 2rem;line-height: 2rem;">完成</button>

                </main><br>
                <br>
                <br>
            </div>
        </div>
        <div class="mui-off-canvas-backdrop"></div>
    </div>
</div>
<input type="hidden" name="imgs_0">
<input type="hidden" name="imgs_1">
<input type="hidden" name="imgs_2">
{include file="public/footer"}
</body>



<script type="text/javascript">

    function upimg(i) {
        var reads= new FileReader();
        f=document.getElementById('file_'+i).files[0];
        reads.readAsDataURL(f);
        reads.onload=function (e) {


            $.ajax({
                type:"post",
                url:'{:url("uplaodimg")}',
                dataType:"json",
                data:{file:this.result},
                success: function(data){
                    if(data.code == 1){
                        layer.msg(data.msg, {icon: 6, time: 1000},function(){

                            $('#img_'+i).attr('src',data.data.src);
                            $('input[name="imgs_'+i+'"]').val(data.data.src);
                        });
                    }else{
                        layer.msg(data.msg, {icon: 5, time: 2000});
                    }
                }
            });
        };
    }

     $('#caidanfenlei').bind("click",function () {
         var data =[];
         $.get('{:url("getmenu")}',function (res) {
             data =  res.data;
             var picker = new mui.PopPicker({   //这里注意大小写PopPicker
                 layer: 2 ,  //表示三列，即三级菜单或者联动
                 buttons:['取消', '确定']     //显示按钮
             });
             console.log(data);
             picker.setData(data);
             //这里代表被选中的元素
             picker.show(function (selectItems) {
                 $("#caidanfenlei").val(selectItems[0].text+'-'+selectItems[1].text);
                 $("#caidanfenlei_id").val(selectItems[1].value);
             })
         });
     });

     $('#data_option').bind("click",function () {
         var dtpicker = new mui.DtPicker(
             {
                 type: "date", //设置日历初始视图模式
                 beginDate: new Date() //设置开始日期
             }
         );
         dtpicker.show(function (selectItems) {
             $("#data_option").val(selectItems.text)
         })

     });

     $("#bank_btn").click(function(){
         console.log(img)
         var remark = $("#remark").val();
         var img = $('input[name="imgs_0"]').val()+','+$('input[name="imgs_1"]').val();+','+$('input[name="imgs_2"]').val();;
         var caidanfenlei_id = $("#caidanfenlei_id").val();
         var data_option = $("#data_option").val();
         var addrid = $("#addrid").val();
         if(remark.length < 1){
             layer.msg('请填写服务需求', {icon: 5, time: 2000});
             return;
         }

         if(caidanfenlei_id.length < 1){
             layer.msg('请选择您需求的服务', {icon: 5, time: 2000});
             return;
         }

         $.ajax({
             type:"post",
             url:'{:url("tosendorder")}',
             dataType:"json",
             data:{remark:remark,fenlie_id:caidanfenlei_id,sevrice_time:data_option,img:img,addr_id:addrid},
             success: function(data){
                 if(data.code == 1){
                     layer.msg(data.msg, {icon: 6, time: 1000},function(){
                         window.location.href = "/index/account/todopay/orderid/"+data.data.id;
                     });
                 }else{
                     layer.msg(data.msg, {icon: 5, time: 2000});
                 }
             }
         });
     });

</script>

</html>